<template>
  <div class="wellManage-box">
    <div class="pass-content">
      <div class="wellManageHead">
        <p class="pass-name">窨井管理</p>
        <div class="well-Deployment"><i>当前部署</i><span>{{currentDeployment}}</span>/<span>{{needDeployment}}</span></div>
      </div>
      <!--窖井部署占比-->
      <ul class="type-length">
        <template>
          <li :style="{width: chooseWidth()}"></li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'peoplePass',
  data () {
    return {
      currentDeployment: 57,
      needDeployment: 132
    }
  },
  methods: {
    chooseWidth () {
      let w = (this.currentDeployment / this.needDeployment) * 230
      return w + 'px'
    }
  }
}
</script>

<style scoped>
.wellManage-box {
  width: 100%;
  margin-bottom: 10px;
}

.type-length {
  width: 100%;
  margin-top: 5px;
  background: rgba(0, 0, 0, 0.2);
}

.type-length li {
  list-style: none;
  height: 10px;
  background: #50e3c2;
  margin-bottom: 10px;
  margin-right: 2px;
}

.pass-content {
  background: rgba(43, 54, 72, 0.7);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.pass-name {
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
  float: left;
}

.wellManageHead {
  overflow: hidden;
}

.well-Deployment {
  float: right;
  color: #50e3c2;
}

.well-Deployment i {
  font-size: 12px;
  color: #9facc3;
  font-style: normal;
  letter-spacing: 0.4px;
  margin-right: 5px;
}

.well-Deployment span {
  font-size: 14px;
}
</style>
